<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-date-picker class="zs-select-md zs-space-right-sm" v-model="year" type="month" placeholder="年份" value-format="YYYY-MM" :clearable="false" @change="getTableData" />
				<el-button class="zs-btn-plain" @click="getTableData"> 查询 </el-button>
			</span>
		</div>
		<div class="zs-card">
			<el-table class="zs-tabel-page-main-no-footer" :data="tableData" :stripe="stripe" :border="false">
				<el-table-column label="序号" width="60" :align="'center'">
					<template #default="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="名称" :align="'left'" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="reportTime" label="时间" :align="'left'" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="commitUserName" label="提报人" :align="'left'" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="auditUserName" label="审批人" :align="'left'" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="commitTime" label="提报时间" :align="'left'" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column prop="auditTime" label="审批时间" :align="'left'" show-overflow-tooltip :formatter="defaultTableData" />
				<el-table-column label="操作" width="150" :align="'center'">
					<template #default="scope">
						<!-- auditStatus  1保存/撤销 2审批中 3审批通过 4驳回 -->
						<el-button class="zs-link" link size="small" @click="previewWord(scope.row)" v-btnPermi="{ permi: 'p_btn_jiesuan_report_view' }">查看</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="goPage(scope.row)" v-btnPermi="{ permi: permissionKey }" :disabled="[2, 3].includes(scope.row.auditStatus) ? true : false">编辑</el-button>
						<el-divider direction="vertical" />
						<el-button class="zs-link" link size="small" @click="openDrawer(false, 'add', scope.row, 'trial')" v-btnPermi="{ permi: 'p_btn_jiesuan_report_baopi' }" :disabled="[2, 3].includes(scope.row.auditStatus) ? true : false">报批</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 报批 -->
		<DringTrial :isShow="drawer.trial.isShowDrawer" :isReadOnly="drawer.trial.isReadOnly" :handleType="drawer.trial.handleType" :currentRow="currentRow.data" @close="closeDrawer($event, 'trial')"> </DringTrial>
	</div>
</template>
<script setup>
	import { getSettlementReportApi } from '@/api/SpecialReport/settlementReport';
	import { previewFile, defaultTableData} from '@/utils/publicUtils';
	import { ref, reactive } from 'vue';
	import { useRouter } from 'vue-router';
	import DringTrial from './components/bringTrial.vue';
	const stripe = ref(true);
	const router = useRouter();

	// 编辑按钮资源标识
	const permissionKey = ref('p_btn_jiesuan_report_edit');
	const year = ref('');
	const tableData = ref([]);

	// 抽屉相关
	let currentRow = reactive({ data: {} });
	let drawer = reactive({
		trial: {
			handleType: '',
			isReadOnly: false,
			isShowDrawer: false,
		},
	});
	const openDrawer = (flag, handleType, row, drawerType) => {
		drawer[drawerType].isReadOnly = flag;
		drawer[drawerType].isShowDrawer = true;
		drawer[drawerType].handleType = handleType;
		currentRow.data = row;
	};
	const closeDrawer = (data, drawerType) => {
		drawer[drawerType].isShowDrawer = data.isShow;
		data.isRefresh && getTableData();
	};

	const getTableData = () => {
		getSettlementReportApi({ reportTime: year.value }).then(res => {
			if (res.data.code == 200) {
				tableData.value = res.data.data;
			}
		});
	};

	function previewWord(row) {
		previewFile(row.reportUrl);
	}

	function goPage(row) {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'dashboard-settlementMonthReport',
				rTitle: '经营分析报告',
				id: row.id,
				permissionKey: permissionKey.value,
			},
		});
	}

	getTableData();
</script>

<style scoped lang="scss"></style>
